<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block" style="margin-top:12px;">
        <div class="brokerageitem">
          <div
            class="content"
            v-for="(goodItem,goodIndex) in order.extend_order_goods"
            :key="goodIndex"
          >
            <img class="image" :src="goodItem.goods_image"/>
            <div style="flex:1;">
              <div class="titlebar">
                <div class="title">{{goodItem.goods_name}}</div>
                <div class="price">￥{{goodItem.transaction_amount}}</div>
              </div>

              <div class="pricebar">
                <div style="flex:1">X{{goodItem.goods_number}}</div>
                <template
                  v-if="(isSuNing(order.seller_member_id) && (goodItem.suning_state === 5 || goodItem.suning_state === 6))">
                  <div v-if="goodItem.suning_state === 5">已取消</div>
                  <div v-if="goodItem.suning_state === 6">已退货</div>
                </template>
              </div>

              <div class="app-specs" v-if="goodItem.sku_name && goodItem.sku_name.length">规格: {{specsName(goodItem.sku_name)}}</div>
            </div>
          </div>
          <!-- <div class='footer'>
          <div class='left'>
              <div class='group'>5人团</div>
              <div class='group grouping'>还差2人</div>
          </div>
          <div class='right'>
            <div v-if="item.allowCancel" class='buttom'>取消订单</div>
            <div class='buttom buttomred'>邀请好友</div>
          </div>
          </div>-->
          <!-- <div class="footer">
            <div class="left"></div>
            <div class="right">
              <div v-if="item.order_state==10" class="buttom buttomred" @click="onPay">立即支付</div>
              <div v-if="item.allowCancel" class="buttom" @click="onCancel(item)">取消订单</div>
            </div>
          </div>-->
        </div>
      </div>

      <div class="block">
        <div class="invoiceitem header">
          <div class="text">订单信息</div>
          <div class="desc">{{order.state_desc}}</div>
        </div>
        <!--非自营并且是重庆电信或者sx的才显示此订单号-->
        <div class="invoiceitem" v-if="(isCQDX || isSanXia) && !isZY(item.seller_member_id)">
          <div class="text">订单号</div>
          <div>{{id}}</div>
        </div>

        <div class="invoiceitem" v-if="isJinDong(order.seller_member_id)">
          <div class="text">{{textOrderNum(order.seller_member_id)}}</div>
          <div>{{subOrderId}}</div>
        </div>
        <div class="invoiceitem" v-else-if="isSuNing(order.seller_member_id)">
          <div class="text">{{textOrderNum(order.seller_member_id)}}</div>
          <div>{{subOrderId}}</div>
        </div>
        <div class="invoiceitem" v-else>
          <div class="text">{{textOrderNum(order.seller_member_id)}}</div>
          <div>{{order.order_sn}}</div>
        </div>
        <div class="invoiceitem">
          <div class="text">支付方式</div>
          <div>{{order.payment_name}}</div>
        </div>
        <div class="invoiceitem">
          <div class="text">下单时间</div>
          <div>{{xdsj}}</div>
        </div>
        <div class="invoiceitem">
          <div class="text">额度支付</div>
          <div>{{order.quota_amount}}</div>
        </div>
        <div class="invoiceitem">
          <div class="text">订单总额</div>
          <div>{{order.order_amount}}（物流：{{order.shipping_fee}}元）</div>
        </div>
        <div class="invoiceitem">
          <div class="text">应付总额</div>
          <div>{{(order.order_amount - order.quota_amount).toFixed(2)}}</div>
        </div>
        <div class="invoiceitem" v-if="order.member_remark">
          <div class="text">用户留言</div>
          <div style="width: 80%">{{order.member_remark}}</div>
        </div>
        <!-- <div class="invoiceitem">
          <div class="text">运费</div>
          <div>{{order.payment_name}}</div>
        </div>-->
        <!-- <div class="invoiceitem">
          <div class="text">优惠金额</div>
          <div>{{xdsj}}</div>
        </div>-->
      </div>

      <div class="block">
        <div class="invoiceitem header">
          <div class="text">收货人信息</div>
        </div>
        <div class="reciver_info">
          <div class="invoiceitem">
            <div
              class="text"
            >收货人:{{order.extend_order_extra?order.extend_order_extra.reciver_name:''}}
            </div>
            <div>{{order.extend_order_extra?order.extend_order_extra.reciver_phone:''}}</div>
          </div>
          <div
            style="width:100%"
          >{{order.extend_order_extra?order.extend_order_extra.reciver_info.address:''}}
          </div>
        </div>
      </div>

      <div class="block">
        <div
          style="font-size: 14px;width: 80px;margin-left: 20px;text-align: center;margin-bottom: 20px"
          v-if="order.order_state==ordersState['待收货']"
          class="buttom buttomred"
          @click="onConfirm()"
        >确认收货
        </div>
        <template v-if="order.order_state==10">
          <div style="display: flex;justify-content: flex-end; margin-bottom: 20px">
            <div
              v-if="order.order_state==ordersState['待付款']"
              class="buttom buttomred"
              @click="onPay(item)"
            >立即支付
            </div>
            <div
              v-if="order.order_state==ordersState['待付款']"
              class="buttom"
              @click="onCancel(item)"
            >取消订单
            </div>
          </div>
        </template>
      </div>
    </div>
    <popup v-if="isConfirm" v-model="isConfirm">
      <checklist title="请选择" label-position="left" :options="confirmList" v-model="confirmValue"></checklist>
      <div style="margin:15px 0">
        <button class="button" :disabled="!confirmValue.length" @click="onConfirmTap">确认收货</button>
      </div>
    </popup>
  </div>
</template>

<script>
  import Me from '@/dll/me'
  import Enum from '@/config/enum'
  import moment from 'moment'
  import Order from '../../../../../mixin/order'
  import specs from '@/mixin/specs'

  export default {
    name: 'mallOrderInfo',
    mixins: [Order, specs],
    data () {
      return {
        xheader: {
          title: '订单详情'
        },
        id: '',
        xdsj: '',
        order: {},
        isConfirm: false,
        confirmList: [],
        confirmValue: [],
        ordersState: Enum.MALL_ORDERS_STATE,

        subOrderId: this.$route.query.subOrderId,

        item: this.$route.query.item
      }
    },
    created () {
      this.id = this.$route.params.id
      this.type = this.$route.query.type
    },
    activated () {
      this.getInfo()
    },
    methods: {
      async getInfo () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let param = {
          order_sn: this.id,
          type: this.type
        }
        if (this.subOrderId) {
          param.sub_order_id = this.subOrderId
        }
        let res = await Me.getInPurchasingOrderInfo(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.order = res.data
          this.xdsj = moment(res.data.created_time * 1000).format(
            'YYYY-MM-DD HH:mm:ss'
          )
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg,
            onHide: () => {
              this.$router.back()
            }
          })
        }
      },
      onConfirm () {
        let order = this.order
        let confirmList = []
        if (order.seller_member_id > 0) {
          for (let i in order.delivery_info) {
            if (order.delivery_info[i].state == 1) {
              confirmList.push({
                value:
                  order.delivery_info[i].express +
                  ' ' +
                  order.delivery_info[i].code,
                key: order.delivery_info[i].e_id
              })
            }
          }
        } else if (order.seller_member_id == -2) {
          for (let i in order.children_order) {
            if (order.children_order[i].packageStatus == 1) {
              confirmList.push({
                value: order.children_order[i].packageId,
                key: order.children_order[i].packageId
              })
            }
          }
        }
        if (confirmList.length) {
          this.confirmList = confirmList
          this.isConfirm = true
        }
      },
      onConfirmTap () {
        this.isConfirm = false
        this.confirm()
      },
      async confirm () {
        let order = this.order
        let confirmValue = this.confirmValue
        let confirmExpFun
        let param = {}
        let tempid = []
        for (let i in confirmValue) {
          tempid.push(confirmValue[i])
        }
        if (order.seller_member_id > 0) {
          param.order_id = order.purchase_order_id
          param.express_id = tempid.join(',')
          confirmExpFun = Me.mallZyOrderConfirmExp
        } else if (order.seller_member_id == -2) {
          param.order_id = order.children_order.orderId
          param.package_id = tempid.join(',')
          confirmExpFun = Me.mallYxOrderConfirmExp
        }
        if (confirmExpFun) {
          this.$vux.loading.show({
            text: '加载中'
          })
          let res = await confirmExpFun(param)
          this.$vux.loading.hide()
          if (res.code == 0) {
            this.$vux.alert.show({
              title: '提示',
              content: '已确认收货',
              onHide: () => {
                this.getInfo()
              }
            })
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res.msg
            })
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .brokerageitem {
    background-color: #fff;
  }

  .brokerageitem .header {
    display: flex;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 17px;
    align-items: center;
  }

  .brokerageitem .ordernumber {
    flex: 1;
    color: #9f8d89;
  }

  .brokerageitem .state {
    color: #FF5722;
  }

  .brokerageitem .await {
    color: #FF5722;
  }

  .brokerageitem .complete {
    color: #52322c;
  }

  .brokerageitem .return {
    color: #f4b13b;
  }

  .brokerageitem .content {
    display: flex;
    flex-direction: row;
    padding: 12px 16px;
    border-top: 1px solid #fbf8f7;
    border-bottom: 1px solid #fbf8f7;
    align-items: center;
  }

  .brokerageitem .content .image {
    width: 90px;
    height: 90px;
    display: block;
    margin-right: 20px;
    background-color: #f5f5f5;
  }

  .brokerageitem .content .titlebar {
    display: flex;
    flex-direction: row;
  }

  .brokerageitem .content .title {
    flex: 1;
    font-size: 14px;
    color: #9f8d89;
    line-height: 20px;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .brokerageitem .content .pricebar {
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    color: #351009;
    line-height: 20px;
  }

  .brokerageitem .content .price {
    font-size: 14px;
    color: #FF5722;
  }

  .brokerageitem .footer {
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .brokerageitem .footer .left {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .right {
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .group {
    height: 24px;
    display: block;
    box-sizing: border-box;
    width: 54px;
    border: 1px solid #46241e;
    font-size: 10px;
    color: #46241e;
    line-height: 22px;
    text-align: center;
    border-radius: 12px;
  }

  .brokerageitem .footer .group.grouping {
    color: #FF5722;
    border-color: #FF5722;
  }

  .brokerageitem .footer .group + .group {
    margin-left: 8px;
  }

  .brokerageitem .footer .buttom {
    height: 28px;
    display: block;
    box-sizing: border-box;
    width: 64px;
    font-size: 12px;
    color: #46241e;
    line-height: 26px;
    text-align: center;
    border: 1px solid #d4d4d4;
  }

  .brokerageitem .footer .buttom.buttomred {
    color: #fff;
    border-color: #FF5722;
    background-color: #FF5722;
  }

  .brokerageitem .footer .buttom + .buttom {
    margin-left: 8px;
  }

  .invoiceitem {
    background-color: #fff;
    padding: 12px 24px;
    font-size: 12px;
    color: #9f8d89;
    display: flex;
    flex-direction: row;
    line-height: 17px;
  }

  .invoiceitem .text {
    margin-right: 5px;
    flex: 1;
  }

  .invoiceitem .right {
    width: 16px;
    height: 16px;
  }

  .invoiceitem.header {
    color: #351009;
    background-color: transparent;
  }

  .invoiceitem.header .desc {
    color: #FF5722;
  }

  .reciver_info {
    background-color: #fff;
    padding: 12px 24px;
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
  }

  .reciver_info .invoiceitem {
    padding: 0;
  }

  .buttom {
    height: 28px;
    display: block;
    box-sizing: border-box;
    width: 64px;
    font-size: 12px;
    color: #46241e;
    line-height: 26px;
    text-align: center;
    border: 1px solid #d4d4d4;
  }

  .buttom.buttomred {
    color: #fff;
    border-color: #FF5722;
    background-color: #FF5722;
  }

  .buttom + .buttom {
    margin-left: 8px;
  }
</style>
